<template>
  <div>

    <el-row class="subNav-lottery" v-if="gameInfo">
      <button v-for="(item, index) in gameInfo " :class="nowSelectedGame.value===item.value?'subNav-lotteryBtn-selected':''" class="subNav-lotteryBtn" :key="index" @click="handleGameInfoClick(item)">
        {{item.label}}
      </button>
    </el-row>

    <el-row class="subCurrPage">
      <ul class="subCurrPage-left">
        <span>当前选中:</span>
        <span style="color:#eb6100">{{nowSelectedGame.label}}</span>
        <img src="../../../../static/agent/img/ico_arrow.png" width="15"/>
      </ul>
      <ul class="subCurrPage-right">
        <button v-for="(item, index) in realtimePt " :class="nowRtt.name===item.name?'isSelectedBtn':''" :key="index" @click="changeRtt(item)">
          {{item.name}}
        </button>
      </ul>
    </el-row>

    <el-dialog :visible.sync="dialogVisible">
        <table style="width: 100%">
          <thead>
          <tr class="totals-title">
            <th colspan="5">万千定位</th>
          </tr>
          </thead>
          <tbody>
          <tr class="totals-num">
            <td v-for="(item,index) in content_title" :key="index">
              {{item}}
            </td>
            <td>
              操作
            </td>
          </tr>
          <!--<tr class="totals-num" v-for="(item ,index) in content_info" :key="index">-->
            <!--<td>-->
              <!--{{item.class}}-->
            <!--</td>-->
            <!--<td>-->
              <!--{{item.bet}}-->
            <!--</td>-->
            <!--<td>-->
              <!--{{item.jine}}-->
            <!--</td>-->
            <!--<td>-->
              <!--{{item.yinkui}}-->
            <!--</td>-->
            <!--<td>-->
              <!--<button>-->
                <!--补货-->
              <!--</button>-->
            <!--</td>-->
          <!--</tr>-->
          </tbody>
        </table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <div class="myDialog" :style="'display:'+popoverVisibleID+';left:'+popoverX+'px;top:'+popoverY+'px'">
      <div v-if="subRealtime">
        <ul class="myDialog-title">补货单</ul>
        <ul>
          <span>类型</span>
          <span>{{subRealtime.value}}</span>
        </ul>
        <ul>
          <span>赔率</span>
          <span>{{subRealtime.odds}}</span>
        </ul>
        <ul>
          <span>金额</span>
          <span><input ref="buhuoText" type="text" v-model="subRealtime.amount"></span>
        </ul>
        <ul>
          <span>限额</span>
          <span>{{subRealtime.balance}}</span>
        </ul>
        <ul class="myDialog-buttonGroup">
          <button @click="paddingBtn">补出</button>
          <button @click="popoverVisibleID = 'none'">取消</button>
        </ul>
      </div>
    </div>

    <el-row class="bread-nav">

      <ul class="bread-nav-lastResultInfo">
        {{realtimesInfo.period}}期
      </ul>
      <ul class="bread-nav-lastResultInfo-group1">
      <span class="bread-nav-lastResultInfo-name">
        {{nowRtt.name}}
      </span>

        <span class="bread-nav-lastResultInfo-close">
        距封盘：{{ closeTime.minutes | twoDigits }}:{{ closeTime.seconds | twoDigits }}
        </span>

        <span class="bread-nav-lastResultInfo-close">
          今日输赢:{{}}
        </span>
      </ul>
      <!--下拉列表-->
      <ul class="bread-nav-lastResultInfo-group2">
          <select v-model="panSelected" @change="changeSelected">
            <option v-for="item in pan" :value="item.value">
              {{item.label}}
            </option>
          </select>
          <select v-model="typeSelected" @change="changeSelected">
              <option v-for="item in type" :value="item.value">
                {{item.label}}
              </option>
          </select>
          <select v-model="sortSelected" @change="changeSelected">
            <option v-for="item in sort" :value="item.value">
              {{item.label}}
            </option>
          </select>
      </ul>
      <ul class="bread-nav-lastResultInfo-group3">
        <button @click="reflashLastResult()" class="bread-nav-lastResultInfo-group3-btn">
          刷新
        </button>
        <span>
         {{requestSecond}}秒
        </span>
        <!--<span>-->
          <!--正在载入中-->
        <!--</span>-->
        <select v-model="requestInterval" @change="selectedChange">
          <option v-for="item in reflashTime" :value="item.value">
            {{item.label}}
          </option>
        </select>
      </ul>
      <ul class="bread-nav-lastResultInfo-group3">
        <span class="lastResultNum">
          {{realtimesInfo.prePeriod}}
          <span style="color:#344b50">期开奖</span>
        </span>
        <ul class="menu1">
          <div v-if="realtimesInfo.preBallNums" :class="{
                  T_PK10:nowSelectedGame.value==='bjpk10'||nowSelectedGame.value==='azlucky10'||nowSelectedGame.value==='amsc'||nowSelectedGame.value==='jsft'
                  ||nowSelectedGame.value==='amjssc'||nowSelectedGame.value==='xyft'||nowSelectedGame.value==='jssc',
                  T_KL8:nowSelectedGame.value==='bjkl8'||nowSelectedGame.value==='azlucky20',
                  T_SSC:nowSelectedGame.value==='cqssc'||nowSelectedGame.value==='azlucky5'||nowSelectedGame.value==='jsssc'||nowSelectedGame.value==='xjssc'
                  ||nowSelectedGame.value==='tjssc'||nowSelectedGame.value==='bsssc'||nowSelectedGame.value==='gama',
                  T_KLSF:nowSelectedGame.value==='gdklsf'||nowSelectedGame.value==='azlucky8',XYNCTerm:nowSelectedGame.value==='cqxync',
                  T_K3:nowSelectedGame.value==='gxk3',T_11X5:nowSelectedGame.value==='gd115',T_GXKLSF:nowSelectedGame.value==='gxklsf',
                }" class="b-container">
                <!--<span :class="{pc28_ball_grey_0:nowSelectedGame.value === 'pcegg',}"></span>-->
                <b v-for="(item,index) in (realtimesInfo.preBallNums.split(','))" :key="index" class="bb" :class="`b${item}`"></b>
          </div>
        </ul>
      </ul>
    </el-row>

    <div class="contentMiddle">
      <el-row class="totals">
        <table v-if="realtimePt">
          <thead>
          <tr class="totals-title">
            <th v-for="(item,index) in realtimePt" :key="index">
              {{item.name}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="totals-num upTable">
            <td v-for="(item,index) in realtimePt" :key="index">
              <button @click="changeRtt(item)">
                {{item.amount}}
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </el-row>

      <el-row class="content" v-if="realtime">
        <table class="top-table" v-if="realTimeMode === 1 ">
          <tr v-if="!realTimeMultiLine">
            <td v-for="(list,index) in realtime" :key="index">
              <table>
                <thead>
                <tr class="totals-title">
                  <th>
                    种类
                  </th>
                  <th>
                    赔率
                  </th>
                  <th>
                    金额
                  </th>
                  <th>
                    盈亏
                  </th>
                </tr>
                <tr class="totals-title">
                  <th colspan="4">
                    {{realtimeTitle[index]}}
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr class="totals-num" v-for="(item ,index1) in list" :key="index1">
                  <td>
                    {{item.value}}
                  </td>
                  <td class="table-odds">
                    {{item.odds}}
                  </td>
                  <td class="table-amount">
                    {{item.amount}}
                  </td>
                  <td @click="showBuHuo($event, item)" class="table-balance">
                    {{item.balance}}
                  </td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>

          <tr v-else>
            <td v-for="(list,index) in realtime" :key="index">
              <table>
                <thead>
                <tr class="totals-title">
                  <th>
                    种类
                  </th>
                  <th>
                    赔率
                  </th>
                  <th>
                    金额
                  </th>
                  <th>
                    盈亏
                  </th>
                </tr>
                </thead>
                <tbody v-for="(subList, subIndex) in list" :key="subIndex">
                <tr class="totals-title">
                  <th colspan="4">
                    {{realtimeTitle[index][subIndex]}}
                  </th>
                </tr>
                <tr class="totals-num" v-for="(item ,index1) in subList" :key="index1">
                  <td>
                    {{item.value}}
                  </td>
                  <td class="table-odds">
                    {{item.odds}}
                  </td>
                  <td class="table-amount">
                    {{item.amount}}
                  </td>
                  <td @click="showBuHuo($event, item)" class="table-balance">
                    {{item.balance}}
                  </td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>

        <table class="top-table"  v-else>
          <thead>
          <tr class="totals-title">
            <th v-for="(list,index) in realtimeTitle" :key="index">
              {{list}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="totals-num">
            <td v-for="(item ,index1) in realtime" :key="index1">
              {{item[0].odds}}
            </td>
          </tr>
          <tr class="totals-num">
            <td v-for="(item ,index1) in realtime" :key="index1">
              {{item[0].amount}}
            </td>
          </tr>
          <tr class="totals-num">
            <td v-for="(item ,index1) in realtime" :key="index1">
              {{item[0].balance}}
            </td>
          </tr>
          <tr class="totals-num">
            <td v-for="(item ,index1) in realtime" :key="index1" class="btn-td">
              <button @click="dialogVisible = true" class="paddingBtn">
                补货
              </button>
            </td>
          </tr>

          </tbody>
        </table>
      </el-row>
      <!--<el-row class="footer">-->
        <!--<ul>-->
        <!--<span>-->
          <!--快速补货:-->
        <!--</span>-->
          <!--<input type="text">-->
          <!--<input type="radio" id="yinkui" name="radio">-->
          <!--<label for="yinkui">平均盈亏</label>-->
          <!--<input type="radio" id="zhancheng" name="radio">-->
          <!--<label for="zhancheng">占成金额</label>-->
          <!--<button @click="dialogVisible = true">-->
            <!--计算补货-->
          <!--</button>-->
        <!--</ul>-->
      <!--</el-row>-->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

let interval = null
let intervalTime = null
export default {
  name: 'notice',
  computed: {
    ...mapGetters([
      'info',
      'nowSelectedGame',
      'realtime',
      'realtimeTitle',
      'realtimePt',
      'realTimeMode',
      'realTimeMultiLine',
    ]),
    closeTime() {
      return this.formatTime(this.diffClose)
    },
  },
  methods: {
    // 点击下拉框修改请求间隔时间
    selectedChange() {
      if (this.requestInterval === 0) {
        this.stop = true
      } else {
        this.stop = false
        clearInterval(interval)
        clearInterval(intervalTime)
        this.requestSecond = this.requestInterval
        this.setIntervalRequest()
      }
    },
    // 点击彩种重新请求参数
    handleGameInfoClick(value) {
      this.$store.commit('SET_NOW_SELECTED_GAME', value)
      const params = {
        game: value.value,
        rtt: 1,
        pan: 0, // 默认全部盘口
        type: 1, // 默认实占
        sort: 1, // 按盈亏排序
      }
      this.$store.dispatch('GetRealtime', params)
      this.$store.dispatch('GetRealtimePt', { game: this.nowSelectedGame.value })
        .then(response => {
          this.nowRtt = response[0]
        })
    },
    changeRtt(value) {
      this.nowRtt = value
      console.log(value)
      this.changeRealTime()
    },
    changeSelected() {
      this.changeRealTime()
    },
    changeRealTime() {
      const temp = {
        game: this.nowSelectedGame.value,
        rtt: parseInt(this.nowRtt.rtt),
        pan: parseInt(this.panSelected),
        type: parseInt(this.typeSelected),
        sort: parseInt(this.sortSelected),
      }
      this.$store.dispatch('GetRealtime', temp)
    },
    paddingBtn() {
      this.popoverVisibleID = 'none'
    },
    showBuHuo(e, item) {
      this.popoverVisibleID = 'block'
      const screenX = document.body.clientWidth
      if (screenX - e.clientX > 100) {
        this.popoverX = e.clientX
      } else {
        this.popoverX = e.clientX - (screenX - e.clientX)
      }
      this.popoverY = e.clientY
      this.$refs.buhuoText.focus()
      this.subRealtime = item
    },
    reflashLastResult() {
      this.request()
    },
    setIntervalRequest() {
      interval = setInterval(async() => {
        await this.request()
      }, 1000 * this.requestInterval)

      // 秒数自减
      intervalTime = setInterval(() => {
        this.diffClose--
        this.diffResult--
        this.requestSecond--
        if (this.requestSecond <= 0) {
          this.requestSecond = this.requestInterval
        }
      }, 1000)
    },
    async request() {
      // 获取对应游戏的当期信息
      await this.$store.dispatch('GetRealtimesInfo', { game: this.nowSelectedGame.value, _: Math.trunc(new Date().getTime() / 1000) })
        .then(response => {
          if (response) {
            this.realtimesInfo = response
            // 距离封盘
            this.diffClose = response.closeTime - response.serverTime
            // 距离开奖
            this.diffResult = response.resultTime - response.serverTime
          }
        })
    },
    seconds(diff) {
      return Math.trunc(diff) % 60
    },
    minutes(diff) {
      return Math.trunc(diff / 60) % 60
    },
    hours(diff) {
      return Math.trunc(diff / 60 / 60) % 24
    },
    days(diff) {
      return Math.trunc(diff / 60 / 60 / 24)
    },
    formatTime(diff) {
      let hours = 0
      let minutes = 0
      let seconds = 0

      if (diff > 0) {
        hours = this.hours(diff)
        minutes = this.minutes(diff)
        seconds = this.seconds(diff)
      }
      return { hours, minutes, seconds }
    },
    getGameOptions() {
      this.$store.dispatch('GetGameOptions')
        .then(response => {
          this.gameInfo = []
          for (const key in response) {
            if (key !== 'message') {
              const temp = {
                label: response[key],
                value: key,
              }
              this.gameInfo.push(temp)
            }
          }
          this.$store.commit('SET_NOW_SELECTED_GAME', this.gameInfo[0])
        })
    },
    readyBefore() {
      this.$store.dispatch('GetGameOptions')
        .then(response => {
          this.gameInfo = []
          for (const key in response) {
            if (key !== 'message') {
              const temp = {
                label: response[key],
                value: key,
              }
              this.gameInfo.push(temp)
            }
          }
          this.$store.commit('SET_NOW_SELECTED_GAME', this.gameInfo[0])
          const params = {
            game: this.gameInfo[0].value,
            rtt: 1,
            pan: 0, // 默认全部盘口
            type: 1, // 默认实占
            sort: 1, // 按盈亏排序
          }
          this.$store.dispatch('GetRealtime', params)
          this.$store.dispatch('GetRealtimePt', { game: this.gameInfo[0].value })
            .then(response => {
              this.nowRtt = response[0]
            })
        })
    },
  },
  watch: {
    stop(to, from) {
      if (to) {
        clearInterval(interval)
        clearInterval(intervalTime)
      } else {
        this.setIntervalRequest()
      }
    },
  },
  filters: {
    twoDigits(value) {
      if (value.toString().length <= 1) {
        return '0' + value.toString()
      }
      return value.toString()
    },
  },
  destroyed() {
    clearInterval(interval)
    clearInterval(intervalTime)
  },
  data() {
    return {
      gameInfo: [], // 彩种数据
      now: Math.trunc(new Date().getTime() / 1000),
      date: null,
      stop: false, // 是否停止自动刷新
      diffClose: 0, // 离封盘时间戳
      diffResult: 0, // 离开奖时间戳
      requestInterval: 10, // 请求间隔秒数
      requestSecond: 10, // 显示秒数
      realtimesInfo: 0, // 当前彩种期数信息
      dialogVisible: false, // 弹出窗
      popoverVisibleID: 'none', // 补货弹出窗
      popoverX: 0, // 补货弹出窗的x轴方向上的距离
      popoverY: 0, // 补货弹出窗的Y轴方向上的距离
      content_title: [
        '种类',
        '赔率',
        '金额',
        '盈亏',
      ],
      content_info: [],
      totals: '',
      subRealtime: {}, //  点击盈亏的子项数据
      reflashTime: [
        {
          label: '手动',
          value: 0,
        },
        {
          label: '10秒',
          value: 10,
        },
        {
          label: '20秒',
          value: 20,
        },
        {
          label: '30秒',
          value: 30,
        },
        {
          label: '40秒',
          value: 40,
        },
        {
          label: '50秒',
          value: 50,
        },
        {
          label: '60秒',
          value: 60,
        },
        {
          label: '70秒',
          value: 70,
        },
        {
          label: '80秒',
          value: 80,
        },
        {
          label: '90秒',
          value: 90,
        },
      ],
      nowRtt: {},
      sortSelected: '1',
      sort: [{
        value: '1',
        label: '按盈亏排序',
      }, {
        value: '2',
        label: '按金额排序',
      }, {
        value: '3',
        label: '按号码排序',
      }],
      typeSelected: '1',
      type: [{
        value: '1',
        label: '占成类型',
      }, {
        value: '2',
        label: '实占',
      }, {
        value: '3',
        label: '补货',
      }],
      panSelected: '0',
      pan: [{
        value: '0',
        label: '全部',
      }, {
        value: '1',
        label: 'A盘',
      }, {
        value: '2',
        label: 'B盘',
      }, {
        value: '3',
        label: 'C盘',
      }, {
        value: '4',
        label: 'D盘',
      }],
    }
  },
  mounted() {
  },
  async created() {
    this.readyBefore()
    await this.request()
    this.setIntervalRequest()
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    /*margin: 30px;*/
    margin: 0 5px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

table{
  width: auto;
  margin: 5px auto;
  border-collapse: collapse;
  border-spacing: 0;
}
  .bread-nav{
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-lastResultInfo{
    color:#386399;
    font-weight: bold;
    display: block;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-lastResultInfo-group1{
    float: left;
  }
  .bread-nav-lastResultInfo-group2{
    float: left;
  }
  .bread-nav-lastResultInfo-group2 select{
    vertical-align: middle;
    margin-top: -3px;
  }
  .bread-nav-lastResultInfo-group3{
    float: right;
    display: flex;
  }
.bread-nav-lastResultInfo-group3 select{
  vertical-align: middle;
  margin-top: -3px;
}
.bread-nav-lastResultInfo-group3 .menu1{
  padding-right: 10px;
}
.bread-nav-lastResultInfo-group3 .b-container{
  display: flex !important;
}
.bread-nav-lastResultInfo-group3 .bb{
  margin-top: 5px;
}
.bread-nav-lastResultInfo-group3 .lastResultNum{
  padding: 0 10px;
}
.bread-nav-lastResultInfo-group3 select{
  height:20px;
  vertical-align: middle;
  margin: 5px 10px auto auto;
}
.bread-nav-lastResultInfo-group3-btn{
  height:20px;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: 5px;
}
  .bread-nav-lastResultInfo img{
    padding-top: 4px;
    padding-right:4px;
  }
  .bread-nav-lastResultInfo-name{
    margin: 0 10px;
    color: #eb6100;
    font-weight: bold;
  }
  .bread-nav-lastResultInfo-close{
    margin: 0 10px;
    color: red;
    font-weight: bold;
  }
  .bread-nav-select{
    height:30px;
  }
  .lastResultNum{
    font-weight: bold;
    color: #386399;
  }

.top-table{
  width: 100%
}
.top-table td{
  vertical-align: top;
}

  .totals{
    text-align: center;
    margin-top: 10px;
  }
  .totals table{
    width: auto;
    margin: 5px auto;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .totals-title{

  }
  .totals-title th{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .totals-num:hover{
      background-color: #CAE8F6;
  }
  .totals-num td{
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
  }
  .upTable button{
    border:0;
    background-color: rgba(0, 0, 0, 0);
    color: blue;
    cursor: pointer;
  }

.upTable button:hover {
  text-decoration: underline;
}
  .content table{
    width: 100%;
  }
  .footer{
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
  }
  .footer input[type="text"]{
    width: 100px;
  }
  .footer button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0px;
    background-color: #487BD1;
    border-radius: 5px;
  }
  .footer button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }

  .myDialog{
    position: absolute;
    z-index:500;
    background-color: #FFF;
    border-left: 1px solid #B9C2CB;
    border-right: 1px solid #B9C2CB;
    font-size:13px;
    min-width:150px;
  }

.myDialog span {
  padding: 5px 10px;
}
  .myDialog span:first-child{
    border-right: 1px solid #B9C2CB;
    width:50px;
  }
  .myDialog input{
    width: 65px;
  }
  .myDialog ul{
    border-top: 1px solid #B9C2CB;
    padding: 5px 0;
  }

.myDialog ul:last-child {
  border-bottom: 1px solid #B9C2CB;
}

.myDialog-title{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6;
    font-size:13px;
    font-weight: bold;
  text-align: center;
  }
  .myDialog-buttonGroup{
    text-align: center;
  }


.subNav-lottery{
  background-color: #3F8CDC;
}
.subNav-lotteryBtn{
  color:#FFF;
  font-size:13px;
  font-weight: bold;
  line-height: 28px;
  border:none;
  background-color: #3F8CDC;
  float: left;
}
.subNav-lotteryBtn:hover{
  color:#fff100;
  text-decoration: underline;
}
.subNav-lotteryBtn-selected{
  color:#fff100;
}

.subCurrPage{
  width:100%;
  display: flex;
  background-color: #d1dbed;
  height:40px;
  line-height: 40px;
  padding: 0 10px;
  font-size:14px;
}
.subCurrPage-left{
  font-weight: bold;
}
.subCurrPage-left img{
  margin: 0 10px;
  vertical-align: middle;
}
.subCurrPage-right button{
  border: 0;
  border-right: 1px solid #1f2d3d;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.subCurrPage-right button:hover{
  color:#e60012;
  text-decoration: underline;
}
.isSelectedBtn{
  color:#e60012;
  font-weight: bold;
}

  .contentMiddle{
    padding: 10px;
  }
  .table-odds{
    font-weight: bold !important;
    color:blue !important;
  }
  .table-amount{
    font-weight: lighter !important;
    color:#299a26 !important;
  }
  .table-balance{
    font-weight: lighter !important;
    color:#555 !important;
  }
  .btn-td{
    background-color: #F2F2F2;
  }
  .paddingBtn{
    color:blue;
    background-color: #FFF;
    border:1px #CCC solid;
  }
  .paddingBtn:hover{
    color:red;
  }
</style>
